<template>
  <div class="map" id="id_map">
  </div>
</template>

<script>
  import kaifeng from "../../assets/js/henan_kaifeng.json";

  export default {
    name: "indexMap",
    props:['isChange'],
    data(){
      return {
        mapChart:"",
      }
    },
    watch:{
      isChange(){
        setTimeout(()=>{
          this.mapChart.resize();
        },500)
      }
    },
    mounted() {
     setTimeout(()=>{
       this.initMap();
     },500)
    },
    methods: {
      initMap() {
        if(!document.getElementById("id_map")){
          return;
        }
        this.mapChart = this.$echarts.init(document.getElementById("id_map"));

        this.mapChart.clear();
        this.$echarts.registerMap("开封", kaifeng);
        var series = [];
        var citys = [
          [{ name: "开封市" }, { name: "" }],
          [{ name: "杞县" }, { name: "开封市" }],
          [{ name: "通许县" }, { name: "开封市" }],
          [{ name: "尉氏县" }, { name: "开封市" }],
          [{ name: "祥符区" }, { name: "开封市" }],
        ];
        var geoCoordMap = {
          "开封市": [114.314595,34.802885],
          "杞县": [114.789592, 34.554857],
          "通许县": [114.473434, 34.486771],
          "尉氏县": [114.199558, 34.417228],
          "祥符区": [114.547533, 34.76274],
        };
        var convertData = function(data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
              res.push([{
                coord: fromCoord
              }, {
                coord: toCoord
              }]);
            }
          }
          return res;
        };
        var color=["#CA9F2C","#0C7996","#0E9177","#0D4BB1","#0E9177"];
        [["", citys]].forEach(function(item, i) {
            series.push({
                name: item[2],
                type: "lines",
                effect: {
                  show: true,
                  period: 6,
                  trailLength: 0,
                  symbol: "arrow",
                  symbolSize: 8
                },
                roam: false,
                lineStyle: {
                  normal: {
                    color: "#60ff44",
                    width: 2,
                    opacity: 0.8,
                    curveness: 0.2
                  }
                },
                data: convertData(item[1])
              }, {
                name: "地点",
                type: "effectScatter",
                coordinateSystem: "geo",
                rippleEffect: {
                  brushType: "fill",
                  period: 7,
                  scale: 20
                },
                label: {
                  normal: {
                    show: true,
                    position: "bottom",
                    distance: 20,
                    formatter: "{b}",
                    fontSize: 12,
                    color:"#fff"
                  }
                },
                symbolSize: 2,
                showEffectOn: "render",
                itemStyle: {
                  normal: {
                    //"color": "#60ff44",
                  }
                },
                data:  item[1].map(function (dataItem,ind) {
                  return {
                    name: dataItem[0].name,
                    value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
                    "itemStyle": {
                      "normal": {
                        "color": color[ind]
                      }
                    }
                  };
                }),
              }
            );
          });
        console.log(series)
        let option = {
          //backgroundColor: "#011238",
          geo: {
            map: "开封",
            left: "center",
            label: {
              normal: {
                show: false,
                color: "#a2dbff"
              },
              emphasis: {
                show:false,
                color: "#a2dbff"
              }
            },
            zoom: 1.2,
            itemStyle: {
              normal: {
                // 地图默认颜色
                color: "#a2dbff",
                areaColor: "#061449",
                borderColor: "#0093f4"
              },
              emphasis: {
                // 鼠标移入
                areaColor: "#061449"
              }
            }
          },
          series: series
        };
        this.mapChart.setOption(option);
      }
    }
  }
  ;

</script>

<style scoped>
  .map {
    height: 60%;
    width:100%;
  }
</style>
